<template>
 <div>
   <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="科目1" name="first">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="cishu"
            label="作业次数"
            width="100">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="mark"
            label="分数">
          </el-table-column>
          <el-table-column
            prop="qianjiao"
            label="是否欠交">
          </el-table-column>
        </el-table>
    </el-tab-pane>
    <el-tab-pane label="科目2" name="second">
      <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="cishu"
            label="作业次数"
            width="100">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="mark"
            label="分数">
          </el-table-column>
          <el-table-column
            prop="qianjiao"
            label="是否欠交">
          </el-table-column>
        </el-table>
    </el-tab-pane>
    <el-tab-pane label="科目3" name="third">
      <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="cishu"
            label="作业次数"
            width="100">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="mark"
            label="分数">
          </el-table-column>
          <el-table-column
            prop="qianjiao"
            label="是否欠交">
          </el-table-column>
        </el-table>
    </el-tab-pane>
    <el-tab-pane label="科目4" name="fourth">
      <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="cishu"
            label="作业次数"
            width="100">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="mark"
            label="分数">
          </el-table-column>
          <el-table-column
            prop="qianjiao"
            label="是否欠交">
          </el-table-column>
        </el-table>
    </el-tab-pane>
  </el-tabs>
 </div>
</template>

<script>
export default {
    data() {
      return {
        activeName: 'first',
        tableData: [{
          date: '2016-05-02',
          cishu: '第一次',
          name: '王小虎',
          mark: '90',
          qianjiao: '否'
        }]
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  
  }
</script>

<style type="text/css">
  
</style>